<template>
	<fs-page class="PageFeatureSearchMulti">
		<div class="form">
			<!-- <el-row>
				<el-col :span="24" >
					
									<span>提示信息
									<el-tooltip
										placement="bottom"
									>
										<div slot="content">
											Excel必须列如下:<br>
											委托批次、委外起始日期、委外计划截止日期、真账号、逾期天数、入催日首张激活卡号、账单日、开户日、停卡日、客户名称、证件号码客户手机号码、户籍地址、客户家庭地址、电邮、客户号、卡号2<br>
											Excel选填列:保全分组
										</div>
										<i class="el-icon-question"></i>										
									</el-tooltip>
									</span>
									
								
				</el-col>
			</el-row> -->
			<el-row >
				<el-col :span="24" style="margin-top: -20px;" >
					<el-card class="mt-10">
						<el-form ref="formRef" :model="formData" :rules="rules"  label-width="150px">
							<el-form-item label="文件"  prop="file">								
								<input type="file" class="filebtn" name="file" accept=".xls,.xlsx" @change="fileUploaderChange" />
							</el-form-item>
							<el-form-item  label="类型" prop="name" >
								<fs-dict-select disabled v-model="formData.name" :dict="dictRef" />
							</el-form-item>
							<el-form-item  label="文件类型" prop="fileType" >
								<fs-dict-select clearable filterable v-model="formData.fileType" :dict="fileTypeDict" />
							</el-form-item>
							<el-form-item  label="处置主体" prop="depart">
								<fs-dict-select clearable filterable   v-model="formData.depart" :dict="optionData.departDict" />
							</el-form-item>
							<el-form-item  label="委案公司" prop="commission_company">
								<fs-dict-select clearable filterable   v-model="formData.commission_company" :dict="optionData.commission_companyDict" />
							</el-form-item>
							<el-form-item  label="委案批次" prop="batch">
								<fs-dict-select clearable filterable   v-model="formData.batch" :dict="optionData.batchDict" />
							</el-form-item>
							<el-form-item  label="法院"  prop="courts">
								<fs-dict-select clearable filterable   v-model="formData.courts" :dict="optionData.courtsDict" />
							</el-form-item>
							<el-form-item  label="原告公司"  prop="plaincompany">
								<fs-dict-select clearable filterable   v-model="formData.plaincompany" :dict="optionData.plaincompanyDict" />
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submit">提交</el-button>
							</el-form-item>
						</el-form>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</fs-page>
</template>

<script lang="ts">

import { ref, reactive, defineComponent} from 'vue';
import {  dict, useUi  } from '@fast-crud/fast-crud';
import {  FormRules } from 'element-plus';
import * as optionData from '/@/stores/dictData';

import * as api from './api';


export default defineComponent({    //这里配置defineComponent
    name: "FileViewSet",   //把name放在这里进行配置了
    setup() {   //这里配置了setup()
		const { ui } = useUi();
    const dictRef =  dict({
					value: "id",
					label: "text",
					data: [
					  { id: "分案表", text: "分案表" },
					  { id: "本息表", text: "本息表" }					  
					]
				});
	const fileTypeDict = dict({
		value: "id",
		label: "text",
		data: [
			{ id: "1", text: "分组导入(默认)" },
			{ id: "2", text: "银行模板导入" }					  
		]
	});
    const formData = ref({
        file: null,
        name: '分案表',
        depart:'',
        commission_company:'',
        batch:'',
        courts:'',
        plaincompany:'',
		fileType:'1'
    });

    const rules = reactive<FormRules>({
        file: [
            { required: true, message: '请选择文件', trigger: 'change' },
        ],
        depart: [
            {
                required: true,
                message: '请选择处置主体',
                
            },
        ],
        commission_company: [
            {
                required: true,
                message: '请选择委派单位',
                
            },
        ],
        batch:[
            {
                required: true,
                message: '请选择批次',
            }
        ],
		fileType:[
			{
				required: true,
                message: '请选择文件类型',
			}
		]
	});

	const formRef = ref();
    const submit = async () =>{
        if (!formRef.value) return;
        await formRef.value.validate((valid: any) => {
            if (valid){
				//ui.message.info("submit:" + JSON.stringify(formData));
				api.importData(formData.value).then((res: any)=>{					
					if (res.code == 201){
						ui.message.success(res.data)
					}else{
						ui.message.error(res.msg);
					}
				});
            }
        });
    }
	async function fileUploaderChange(event: any){
		const file = event.target.files[0];
		formData.value.file = file;		
	}
    return {
        dictRef,
		fileTypeDict,
        formData,
        formRef,
        submit,
        rules,
		optionData,
		fileUploaderChange
    }
				
    } 	//这里关闭setup()
  });  //关闭defineComponent

 </script>
 <style lang="scss" >
 .form {
   margin-top: 10px;
   .mt-10 {
	 padding-left: 20%;
	 padding-right: 20%;
   }
   .filebtn {
	 line-height: 24px;
   }
 }
</style>